body{
    margin: 0;
    padding:0;
    background: #f0f2f5;
}

    table tr:hover{
    background-color: orangered;
    }
/*页面顶部栏*/
.main_top{
    width:100%;
    height:70px;
    background-color: #0fd2de;
}
.main_top h3{
    margin: 0;
    padding-left: 30px;
    line-height: 70px;
    float:left;
}
.main_top p{
    float:right;
     line-height:40px;
}
.main_top  button{
   height:28px;
   margin-top:6px;
   margin-right: 20px;
   float:right;
   background-color:#fd4626;
}
.main_top button:hover{
background-color:#03a9f4;
}
/*页面左边区域*/ 
.main_left{
   width:20%;
   height:600px;
   float:left;
}
#a1,#a2{
width:100%;
height:99px;
margin-bottom:57px;

}
.main{
width:96%;
height:600px;
margin: 20px auto;
}
.left_botton{
width:100%;
height:288px;
}
.left_botton button{
width:49%;
height:140px;
margin-top:4px;
background-color: darkgoldenrod;

}

#a6:hover #tx{
   animation: xz 1.5s linear infinite;
}

@keyframes xz{
    to{
        transform:rotate(360deg);
    }
}

.a{
    display: inline-table;
}

.aa{
    margin-top:-88px;
   display: none;
}
.btn01{
    line-height: 46px;
}
.a:hover .aa{
    display: block;
}
.aa button{
    margin-top: 7px;
}

button{
border: none;
}
#a1{
background-color: #ff4268;
}
#a1:hover{
    background-color: #fd3b62;
}
#a2{
background-color: #ff6348;
}
#a2:hover{
    background-color:#fd4626;
}
#a3{
background-color: #4b2cb8;
}
#a3:hover{
    background-color: #4424b8;
}
#a4{
background-color: #07a626;
}
#a4:hover{
    background-color:#05b829;
}
#a5{
background-color: #01ffff;
}
#a5:hover{
    background-color:#00e6e6;
}
#a6{
background-color:coral;
}
#a6:hover{
    background-color:rgb(253, 118, 69);
}

/*页面右边区域*/
.main_right{
width:79%;
height:100%;
float:right;
background-color: #d9d9d9;
}
#b1,#b3,#b4,#b5{
display: none;
}

.main_right h4{
text-align: center;
}
/*添加商品*/
#b1 form{
line-height: 80px;
margin-left: 20px;
}
#b1 form .tjann{
width:70px;
height:40px;
border: none;
background-color: #ff4268
}
#b1 form .tjann:hover{
background-color: #f13056;
}
#b1 form .spmcsrk{
width:67%;
}
#b1 form .splx{
width:30%;
}
#b1 form .splx1 {
width:29%;
}

/*  管理商品  */
#b2 form{
padding-left:20px;
}
#b2 form .ssk{
width:70%;
height:20px;
}
#b2 form .cxann{
width:50px;
height:30px;
border: none;
background-color: #ff6348;
}
#b2 form .cxann:hover{
background-color: greenyellow;
}

a{
    text-decoration: none;
    }

#b2 .splb{
width:90%;
height:400px;
margin:20px auto;
}
#b2 table{
text-align: center;
}
table tr:hover{
    background: linear-gradient(to right,#12C2E9,#C471ED
    ,#c471ed,#f64f59);
    }
#b2 .fyann{
width:100%;
margin:10px auto;
text-align: center;

}

#b2 .fyann button{
width:52px;
height:36px;
background-color:#f151cd;
border-radius: 15%;
}

#b2 #btn01{
    width:36px;
    height:36px;
    border-radius: 20%;
}

#b2 .fyann button:hover{
background-color: #ec23bf;
}
#b2 table th{
width:200px;
height:30px;
}

#b2 .splb .ckan{
background-color:#00b7ee;
}
#b2 .splb .xgan{
background-color:#8183ff;
}
#b2 .splb .scan{
background-color:#ec6941;
}
#b2 .splb .ckan:hover{
background-color:green; 
}
#b2 .splb .xgan:hover{    
background-color:green; 
}
#b2 .splb .scan:hover{    
background-color:red; 
} 

/*营业报表*/
#b3 form{
text-align: center;
line-height: 108px;
}
#b3 form .cxrq{
width:40%;
}
#b3 form .selectann:hover{
background-color: aquamarine;
}

/*  查看库存*/
#b4 .kc{
width:86%;
height:490px;
margin: 40px auto;
text-align: center;
}




#b4 .lskc{
width:140px;
height:90px;
margin-bottom: 20px;
margin-top:20px;
margin-left:100px;
background-color: #0fd2de;
}
#b4 .lskc:hover{
box-shadow: 1px 1px 10px #07a626;
}
#b4 .ylkc{
width:140px;
height:90px;
margin-bottom: 20px;
margin-top:20px;
margin-left:100px;
background-color: #ec6941;
}
#b4 .ylkc:hover{
box-shadow: 1px 1px 10px #07a626;
}
#b4 .wjkc{
width:140px;
height:90px;
margin-bottom: 20px;
margin-top:20px;
margin-left:100px;
background-color: #ec23bf;
}
#b4 .wjkc:hover{
box-shadow: 1px 1px 10px #07a626;
}
#b4 .rypkc{
width:140px;
height:90px;
margin-bottom: 20px;
margin-top:20px;
margin-left:100px;
background-color: #0fac8f;
}
#b4 .rypkc:hover{
box-shadow: 1px 1px 10px #07a626;
}
#b4 .clkc{
width:140px;
height:90px;
margin-bottom: 20px;
margin-top:20px;
margin-left:100px; 
background-color:#8dc53e; 
}
#b4 .clkc:hover{
box-shadow: 1px 1px 10px #07a626;
}
#b4 .jlkc{
width:140px;
height:90px;
margin-bottom: 20px;
margin-top:20px;
margin-left:100px;
background-color: #ea68a2;
}
#b4 .jlkc:hover{
box-shadow: 1px 1px 10px #07a626;
}
#b4 .nlkc{
width:140px;
height:90px;
margin-bottom: 20px;
margin-top:20px;
margin-left:100px;
background-color: #8183ff;
}
#b4 .nlkc:hover{
box-shadow: 1px 1px 10px #07a626;
}
/*  个人中心  */
#b5 p{
padding-left: 15%;
}
.xgxx{
width:140px;
height:90px;
margin-top:97px;
margin-left:15%;  
background-color: #0fd2de;
}
.xgxx:hover{
box-shadow: 1px 1px 10px #0fd2de; 
}
.xgmm{
width:140px;
height:90px;
margin-top:97px;
margin-left:15%;
background-color: #ec6941;
}
.xgmm:hover{
box-shadow: 1px 1px 10px #ec6941; 
}
.tcdl{
width:140px;
height:90px;
margin-top:97px;
margin-left:15%;
background-color: #ec23bf;
}
.tcdl:hover{
box-shadow: 1px 1px 10px #ec23bf; 
}

@media screen and (max-width:800px){
    .main_top h3 {
    font-size:10px;
    }
    .main_top p {
    font-size:10px;
    margin-top: 17px;
    }
  /*页面左边区域*/ 
.main_left{
   width:100%;
   height:500px;
   
}
/*页面右边区域 */
.main_right{
width:99%;
height:785px;
float:right;
margin-top:16px;

}
#b1 form .splx {
    width: 68%;
}
#b4 .lskc,#b4 .wjkc,#b4 .ylkc,#b4 .rypkc,#b4 .clkc,#b4 .nlkc{
    margin-left:10px;
}  
#b4 .wjkc{
    margin-left:10px;
}
#b4 .clkc {
margin-left:19px;
}
#b2 form {
    padding-left: 7px;
}

#b4 .jlkc {
margin-left:10px;
}
    #b4 .kc{
    width:100%;
    height: 490px;
    margin: 40px auto;
    text-align: center;
}
#a1,#a2{
width:100%;
height:99px;
margin-bottom:10px;
}
#b2 .fyann {
    width: 100%;   
}
.xgxx {
    width: 94px;
    height: 90px;
    margin-left: 5%;
}
.xgmm {
    width: 94px;
    height: 90px;
    margin-left: 5%;
}
.tcdl {
    width: 94px;
    height: 90px;
    margin-left: 5%;
    margin-top:10px;
}
#b2 .fyann button{
width:52px;
height:30px;
margin: 83px 15px;
background-color:#f151cd;
}
#b1 form .splx1 {
    width: 65%;
}

  }

    /*动画部分*/
    .main_right li{
        list-style-type:none;
      }
      /*上边线条*/
      .main_right:hover .li_top{
              width:100%;
              height:2px;
              position:absolute;
              top:0;
              left:0;
              background: linear-gradient(to right,transparent,#1779ff);
              animation: animtop 2s linear infinite;
      }
    /*右边线条 */
      .main_right:hover .li_right{
              width:3px;
              height:100%;
              position: absolute;
              right:0;
              top:0;
              background: linear-gradient(to bottom,transparent,#1779ff);
              animation: animright 2s linear infinite;
              animation-delay: 1s;
      }
      /*下边线条*/
      .main_right:hover .li_bottom{
              width:100%;
              height:3px; 
              position: absolute;
              bottom:0;
              background: linear-gradient(to left,transparent,#1779ff);
              animation: animbottom 2s linear infinite;
         
      }
    /*左边线条*/
    .main_right:hover .li_left{
              width:3px;
              height:100%;
              position: absolute;
              left:0;
              top:0;
              background: linear-gradient(to top,transparent,#1779ff);
              animation: animleft 2s linear infinite;
              animation-delay: 1s;
      }
  
       /*上边的动画*/
    @keyframes animtop{
        0%{
            transform: translateX(-100%);
        }
        100%{
            transform: translateX(100%);
        }
    }
  
    /*右边的动画*/
  @keyframes animright{
        0%{
            transform: translateY(-100%);
        }
        100%{
            transform: translateY(100%);
        }
    }
    
    /*下边的动画*/
    @keyframes animbottom{
        0%{
            transform: translateX(100%);
        }
        100%{
            transform: translateX(-100%);
        }
    }
  
    /*左边的动画*/
    @keyframes animleft{
        0%{
            transform: translateY(100%);
        }
        100%{
            transform: translateY(-100%);
        }
    }
    
